<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="header-left" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="app-title">优惠活动</text>
      <view class="header-icons">
        <text class="icon">⋯</text>
        <text class="icon">─</text>
        <text class="icon">◎</text>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
        <text class="search-icon">🔍</text>
        <input class="search-input" v-model="searchKeyword" placeholder="找工作、找服务、求职找房子" />
        <button class="search-btn" @click="performSearch">搜索</button>
      </view>
    </view>

    <!-- 分类标签页 -->
    <view class="tabs-section">
      <scroll-view class="tabs-scroll" scroll-x="true">
        <view class="tabs-container">
          <view 
            class="tab-item" 
            :class="{ active: activeTab === index }"
            v-for="(tab, index) in tabs" 
            :key="index"
            @click="switchTab(index)"
          >
            <text class="tab-text">{{ tab.name }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 内容列表 -->
    <view class="content-list">
      <view class="content-item" v-for="(item, index) in filteredContentList" :key="index" @click="goToDetail(item)">
        <view class="item-header">
          <view class="user-info">
            <image class="user-avatar" :src="item.avatar || '/static/images/profile.jpg'" mode="aspectFill"></image>
            <view class="user-details">
              <text class="user-name">{{ item.contactPerson || '未知用户' }}</text>
              <text class="publish-date">{{ formatDate(item.publishTime) }}</text>
            </view>
          </view>
          <view class="item-tag">{{ getCategoryName(item.category) }}</view>
          <button class="call-btn" @click="makeCall(item)">打电话</button>
        </view>
        
        <view class="item-content">
          <text class="item-title">{{ item.title }}</text>
          <text class="item-description">{{ item.description }}</text>
        </view>
        
        <view class="item-details">
          <view class="detail-item" v-for="(detail, dIndex) in getItemDetails(item)" :key="dIndex">
            <text class="detail-label">{{ detail.label }}：</text>
            <text class="detail-value">{{ detail.value }}</text>
          </view>
        </view>
        
        <view class="item-footer">
          <view class="stats">
            <text class="stat-text">{{ item.views || 0 }}浏览</text>
            <text class="stat-text">{{ item.shares || 0 }}分享</text>
          </view>
          <text class="publish-info">{{ formatDate(item.publishTime) }}发布</text>
        </view>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="bottom-nav">
      <view class="nav-tab" @click="navigateToTab('home')">
        <text class="nav-icon">🏠</text>
        <text class="nav-text">首页</text>
      </view>
      <view class="nav-tab publish" @click="navigateToTab('publish')">
        <text class="publish-icon">+</text>
        <text class="nav-text">发布</text>
      </view>
      <view class="nav-tab" @click="navigateToTab('mine')">
        <text class="nav-icon">👤</text>
        <text class="nav-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      activeTab: 0,
      tabs: [
        { name: '全部', key: 'all' },
        { name: '美食推广', key: 'food' },
        { name: '旅游景点', key: 'tourism' },
        { name: '教育培训', key: 'education' },
        { name: '其他广告', key: 'other' }
      ],
      contentList: [
        {
          id: 1,
          title: '高安卫眼世家,专注眼睛视力健康服务,对青少年的近视,斜视,散光,弱视等问题都可以...',
          category: 'other',
          adType: '服务推广',
          priceNote: '面议',
          transactionMethod: '仅支持快递2',
          itemCondition: '全新宝贝2',
          paymentMethod: '仅现金2',
          description: '高安卫眼世家,专注眼睛视力健康服务,对青少年的近视,斜视,散光,弱视等问题都可以提供专业的解决方案。我们拥有先进的设备和专业的医生团队，为您的视力健康保驾护航。',
          publishTime: '2025-06-09',
          views: 1662,
          shares: 16,
          contactPerson: '伍女士',
          contactPhone: '13800138000',
          status: 1
        },
        {
          id: 2,
          title: '高安特色美食推广 - 传统手工制作，纯天然无添加',
          category: 'food',
          adType: '美食推广',
          priceNote: '15-50元',
          transactionMethod: '到店消费',
          itemCondition: '新鲜制作',
          paymentMethod: '现金/微信/支付宝',
          description: '高安特色美食，传统手工制作，纯天然无添加。包括高安米粉、高安小炒、特色小吃等，欢迎品尝！',
          publishTime: '2025-06-08',
          views: 892,
          shares: 23,
          contactPerson: '张师傅',
          contactPhone: '13900139000',
          status: 1
        },
        {
          id: 3,
          title: '高安旅游景点推荐 - 美丽乡村，生态旅游',
          category: 'tourism',
          adType: '旅游推广',
          priceNote: '免费-100元',
          transactionMethod: '现场购票',
          itemCondition: '景区开放',
          paymentMethod: '现金/微信/支付宝',
          description: '高安美丽乡村，生态旅游胜地。这里有青山绿水，有古村落，有特色民宿，是您休闲度假的理想选择。',
          publishTime: '2025-06-07',
          views: 1245,
          shares: 45,
          contactPerson: '李导游',
          contactPhone: '13700137000',
          status: 1
        }
      ]
    }
  },
  computed: {
    filteredContentList() {
      if (this.activeTab === 0) {
        return this.contentList;
      }
      const categoryKey = this.tabs[this.activeTab].key;
      return this.contentList.filter(item => item.category === categoryKey);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    switchTab(index) {
      this.activeTab = index;
      console.log('切换到标签页:', this.tabs[index].name);
    },
    performSearch() {
      if (!this.searchKeyword.trim()) {
        uni.showToast({
          title: '请输入搜索关键词',
          icon: 'none'
        });
        return;
      }
      console.log('搜索关键词:', this.searchKeyword);
      uni.showToast({
        title: `搜索: ${this.searchKeyword}`,
        icon: 'none'
      });
    },
    makeCall(item) {
      console.log('拨打电话给:', item.contactPerson);
      uni.showToast({
        title: `拨打电话给${item.contactPerson}`,
        icon: 'none'
      });
    },
    navigateToTab(tab) {
      console.log('导航到标签页:', tab);
      if (tab === 'publish') {
        uni.showToast({
          title: '发布功能',
          icon: 'none'
        });
      } else if (tab === 'mine') {
        uni.showToast({
          title: '我的页面',
          icon: 'none'
        });
      } else if (tab === 'home') {
        uni.navigateTo({
          url: '/pages/index/index'
        });
      }
    },
    goToDetail(item) {
      // 跳转到优惠活动详情页面
      uni.navigateTo({
        url: `/pages/promotion/detail?id=${item.id}`
      });
    },
    getCategoryName(category) {
      const categoryNames = {
        'food': '美食推广',
        'tourism': '旅游景点',
        'education': '教育培训',
        'other': '其他广告'
      };
      return categoryNames[category] || '其他广告';
    },
    getItemDetails(item) {
      const details = [];
      if (item.priceNote) {
        details.push({ label: '宝贝价格', value: item.priceNote });
      }
      if (item.itemCondition) {
        details.push({ label: '宝贝成色', value: item.itemCondition });
      }
      if (item.transactionMethod) {
        details.push({ label: '交易方式', value: item.transactionMethod });
      }
      if (item.paymentMethod) {
        details.push({ label: '付款方式', value: item.paymentMethod });
      }
      if (item.contactPerson) {
        details.push({ label: '联系人', value: item.contactPerson });
      }
      return details;
    },
    formatDate(dateStr) {
      if (!dateStr) return '';
      return dateStr;
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 顶部标题栏 */
.header {
  background-color: #4CAF50;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-icon {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.app-title {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.header-icons {
  display: flex;
  gap: 20rpx;
}

.icon {
  color: white;
  font-size: 32rpx;
}

/* 搜索栏 */
.search-section {
  background-color: #4CAF50;
  padding: 0 30rpx 30rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 25rpx;
  padding: 20rpx 30rpx;
}

.search-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
}

.search-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 20rpx;
  padding: 15rpx 25rpx;
  font-size: 26rpx;
}

/* 标签页 */
.tabs-section {
  background-color: white;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 20rpx;
}

.tabs-scroll {
  white-space: nowrap;
}

.tabs-container {
  display: flex;
  padding: 0 20rpx;
}

.tab-item {
  padding: 25rpx 30rpx;
  text-align: center;
  border-bottom: 4rpx solid transparent;
  white-space: nowrap;
}

.tab-item.active {
  border-bottom-color: #4CAF50;
  background-color: #e8f5e8;
}

.tab-text {
  font-size: 28rpx;
  color: #333;
}

.tab-item.active .tab-text {
  color: #4CAF50;
  font-weight: bold;
}

/* 内容列表 */
.content-list {
  background-color: white;
}

.content-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.publish-date {
  font-size: 24rpx;
  color: #999;
}

.item-tag {
  background-color: #FFC107;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  margin: 0 20rpx;
}

.call-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 20rpx;
  padding: 12rpx 20rpx;
  font-size: 24rpx;
}

.item-content {
  margin-bottom: 20rpx;
}

.item-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.item-description {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  display: block;
}

.item-details {
  margin-bottom: 20rpx;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8rpx;
}

.detail-label {
  font-size: 24rpx;
  color: #4CAF50;
  min-width: 120rpx;
}

.detail-value {
  font-size: 24rpx;
  color: #333;
  flex: 1;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats {
  display: flex;
  gap: 20rpx;
}

.stat-text {
  font-size: 24rpx;
  color: #999;
}

.publish-info {
  font-size: 24rpx;
  color: #999;
}

/* 底部导航 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  display: flex;
  padding: 15rpx 0;
  border-top: 1rpx solid #f0f0f0;
  z-index: 1000;
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
}

.nav-tab.active {
  color: #333;
}

.nav-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}

.nav-text {
  font-size: 22rpx;
}

.nav-tab.publish {
  position: relative;
}

.publish-icon {
  background-color: #4CAF50;
  color: white;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}
</style>
